"use client"

import { motion } from "framer-motion"
import { Share2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

interface Achievement {
  id: string
  name: string
  unlocked: boolean
  progress: number
}

interface AchievementCenterProps {
  achievements: Achievement[]
}

export default function AchievementCenter({ achievements }: AchievementCenterProps) {
  return (
    <div className="h-full w-full flex flex-col items-center justify-between py-10">
      <div className="flex-1 w-full flex flex-col items-center justify-center">
        <div className="relative w-32 h-[60%] rounded-2xl bg-gray-900 overflow-hidden">
          {/* Mac Pro-inspired perforated design */}
          <div className="absolute inset-0 grid grid-cols-4 gap-2 p-3">
            {achievements.map((achievement, index) => (
              <motion.div
                key={achievement.id}
                className={cn(
                  "relative aspect-square rounded-full overflow-hidden",
                  "flex items-center justify-center",
                  "bg-gray-800 border border-gray-700",
                  achievement.unlocked && "bg-gradient-to-br from-gray-700 to-gray-900",
                )}
                initial={{ opacity: 0.6 }}
                animate={{
                  opacity: achievement.unlocked ? 1 : 0.6,
                  scale: achievement.unlocked ? 1 : 0.9,
                }}
                transition={{ delay: index * 0.1 }}
              >
                {/* Base state - line art */}
                <svg
                  viewBox="0 0 24 24"
                  className={cn("w-4 h-4", achievement.unlocked ? "text-gray-300" : "text-gray-600")}
                  fill="none"
                  stroke="currentColor"
                  strokeWidth={1.5}
                >
                  <path d="M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2 Z" />
                </svg>

                {/* Activated state - chrome silver layer */}
                {achievement.unlocked && (
                  <motion.div
                    className="absolute inset-0 flex items-center justify-center"
                    initial={{ scale: 0 }}
                    animate={{ scale: 1 }}
                    transition={{
                      type: "spring",
                      stiffness: 300,
                      damping: 20,
                      delay: index * 0.1 + 0.2,
                    }}
                  >
                    <div className="absolute inset-0 bg-gradient-to-br from-gray-300 via-gray-400 to-gray-600 opacity-40" />
                    <motion.div
                      className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-30"
                      animate={{
                        x: ["0%", "100%"],
                        transition: {
                          repeat: Number.POSITIVE_INFINITY,
                          repeatType: "mirror",
                          duration: 2,
                          ease: "linear",
                          delay: index * 0.3,
                        },
                      }}
                    />

                    {/* Achievement icon */}
                    <svg viewBox="0 0 24 24" className="w-4 h-4 text-white z-10" fill="currentColor">
                      <path d="M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2 Z" />
                    </svg>
                  </motion.div>
                )}

                {/* Progress indicator for locked achievements */}
                {!achievement.unlocked && achievement.progress > 0 && (
                  <svg viewBox="0 0 36 36" className="absolute inset-0 w-full h-full">
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="rgba(120, 120, 120, 0.3)"
                      strokeWidth="2"
                      strokeDasharray="100, 100"
                    />
                    <path
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      fill="none"
                      stroke="#666"
                      strokeWidth="2"
                      strokeDasharray={`${achievement.progress}, 100`}
                    />
                  </svg>
                )}
              </motion.div>
            ))}
          </div>
        </div>
      </div>

      {/* Share button */}
      <div className="mb-8">
        <Button
          variant="outline"
          size="icon"
          className="w-12 h-12 rounded-full border border-gray-700 bg-gray-900 hover:bg-gray-800 relative group"
        >
          <Share2 className="h-5 w-5 text-gray-400 group-hover:text-white transition-colors" />
          <div className="absolute -top-1 -right-1 w-3 h-3 rounded-full bg-gray-800 flex items-center justify-center">
            <motion.div
              className="w-1.5 h-1.5 rounded-full bg-gray-400"
              animate={{
                opacity: [0.4, 1, 0.4],
                scale: [0.8, 1, 0.8],
              }}
              transition={{
                repeat: Number.POSITIVE_INFINITY,
                duration: 2,
                ease: "easeInOut",
              }}
            />
          </div>
        </Button>
      </div>
    </div>
  )
}

